import { Button, Slider, Typography } from "@mui/material";
import { FC, memo, ReactElement } from "react";
import styled from "styled-components";

interface IProps {
  uploadImage: () => void;
  download: () => void;
  onChangeSize: (value: number) => void;
  onChangeOpacity: (value: number) => void;
}

const ToolBar: FC<IProps> = ({
  uploadImage,
  download,
  onChangeSize,
  onChangeOpacity,
}): ReactElement => {
  return (
    <Wrap>
      <Button onClick={uploadImage} variant='outlined'>
        上传图片
      </Button>
      <Button onClick={download} variant='contained'>
        下载图片
      </Button>
      <div>
        <Typography>透明度</Typography>
        <Slider
          // @ts-ignore
          onChange={({ target }) => target && onChangeOpacity(target.value)}
          defaultValue={100}
        />
        <Typography>大小</Typography>
        <Slider
          // @ts-ignore
          onChange={({ target }) => target && onChangeSize(target.value)}
          defaultValue={50}
        />
      </div>
    </Wrap>
  );
};

export default memo(ToolBar);

const Wrap = styled.div`
  display: flex;
  width: 20rem;
  flex-wrap: wrap;
  justify-content: space-between;

  & > button {
    flex: 1;
    margin: 0 0.5rem;
  }

  & > div {
    width: 100%;
    margin-top: 0.5rem;
  }

  /* flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; */
`;
